<script setup>
import { getReaderListAPI, deleteReaderAPI } from "@/api/reader";
import { onMounted, ref, reactive } from "vue";
import addReader from "../Reader/addReader.vue";
import updateReader from "../Reader/updateReader.vue";
import { ElMessage } from "element-plus";

const total = ref(0); //总条数
//1.获取读者列表逻辑
const readerList = ref([]); //存放获取到的读者列表
const getReaderList = async () => {
  const res = await getReaderListAPI({
    pagenum: currentPage.value,
    pagesize: pageSize.value,
    card: filterData.card,
    name: filterData.name,
  });
  readerList.value = res.data.data;
  total.value = res.data.total;
  console.log(res);
};
//2.分页组件逻辑
const currentPage = ref(1); //当前页码
const pageSize = ref(10); //每页显示的条数

//2.1页码或每页显示的条数发生变化后触发的函数
const handleChange = () => {
  //重新获取读者列表
  getReaderList();
};

//3.筛选
const showFilterDialog = ref(false); //控制筛选对话框的显示与隐藏
const filterData = reactive({
  name: "",
  card: "",
});
//3.1应用筛选
const applyFilter = () => {
  console.log(filterData);
  currentPage.value = 1; //重置页码
  getReaderList();
  showFilterDialog.value = false;
};
//3.2重置筛选
const resetFilter = () => {
  filterData.name = "";
  filterData.card = "";
  getReaderList();
  showFilterDialog.value = false;
};

//4.添加读者信息
const dialogVisible = ref(false); //控制添加对话框的显示

//5.编辑读者信息
const editDialogVisible = ref(false); // 控制编辑对话框的显示
const currentReader = ref({}); // 当前编辑的读者数据

const handleEdit = (row) => {
  currentReader.value = { ...row }; // 使用浅拷贝避免引用问题
  editDialogVisible.value = true;
};

//6.删除读者信息
const handleDelete = async (id) => {
  const res = await deleteReaderAPI(id);
  if (res.data.code === 1) {
    ElMessage.success(res.data.msg);
  } else {
    ElMessage.error("错误");
  }
};
onMounted(() => getReaderList());
</script>

<template>
  <Card title="读者管理" class="reader-manage-container">
    <div class="header">
      <div>
        <el-button
          type="primary"
          @click="showFilterDialog = true"
          style="margin-right: 10px"
        >
          <el-icon> <Filter /> </el-icon> 筛选
        </el-button>
        <el-button type="primary" @click="dialogVisible = true">
          <el-icon> <Plus /> </el-icon> 添加读者
        </el-button>
      </div>
    </div>
    <div class="table-wrapper">
      <el-table
        :data="readerList"
        border
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column prop="card" label="卡号" min-width="120">
        </el-table-column>
        <el-table-column prop="username" label="账号（用户名）" min-width="120">
        </el-table-column>
        <el-table-column prop="name" label="姓名" min-width="120">
        </el-table-column>
        <el-table-column prop="sex" label="性别" min-width="60">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" min-width="150">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" min-width="180">
        </el-table-column>
        <el-table-column label="操作" min-width="180">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleEdit(row)">
              编辑</el-button
            >
            <el-button type="danger" size="small" @click="handleDelete(row.id)">
              删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--分页组-->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          layout="total, sizes, prev, pager, next ,jumper"
          :total="total"
          @size-change="handleChange"
          @current-change="handleChange"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog v-model="showFilterDialog" title="读者筛选" width="500px">
      <el-form :model="filterData" label-width="80px">
        <el-form-item label="卡号">
          <el-input v-model="filterData.card" placeholder="请输入读者卡号" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="filterData.name" placeholder="请输入读者姓名" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="resetFilter"> 重置</el-button>
        <el-button type="primary" @click="applyFilter"> 确定</el-button>
      </template>
    </el-dialog>

    <!-- 添加读者对话框 -->
    <addReader v-model="dialogVisible"> </addReader>
    <!--编辑读者对话框-->
    <updateReader
      v-model="editDialogVisible"
      :reader-data="currentReader"
      @success="getReaderList"
    />
  </Card>
</template>

<style scoped>
.reader-manage-container {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

/* 小屏幕时调整表格字体大小 */
@media screen and (max-width: 768px) {
  :deep(.el-table) {
    font-size: 12px;
  }

  :deep(.el-table th),
  :deep(.el-table td) {
    padding: 8px 0;
  }
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header > div {
  display: flex;
  align-items: center;
}
</style>
